<template>
  <div class="common-layout">
    <el-container>
      <el-header style="font-size: 12px; background-color: lightskyblue">
        <div class="toolbar">
          <div>
            <el-icon><Promotion /></el-icon>后台管理系统
          </div>
          <div>
            <span>欢迎登录,{{ useSysStore.account }}</span>
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="back">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-scrollbar>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen2"
            @close="handleClose2"
          >
            <el-sub-menu
              v-for="(item, index) in menuList"
              :key="item.id"
              :index="index + 1 + ''"
              class="sub-menu"
            >
              <template #title>
                <el-icon>
                  <component :is="resolveComponent(item.icon)" alt="icon" />
                </el-icon>
                <span>{{ item.text }}</span>
              </template>
              <div v-if="item.children && item.children.length">
                <el-menu-item
                  :class="['menu-item', activePath == subItem.url ? 'aaa' : '']"
                  v-for="(subItem, index2) in item.children"
                  :key="subItem.id"
                  :index="index + 1 + '-' + (index2 + 1)"
                  @click="handleMenuClick(subItem.text, subItem.url)"
                >
                  <template #title>
                    <router-link :to="subItem.url">{{
                      subItem.text
                    }}</router-link>
                  </template>
                </el-menu-item>
              </div>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
        <el-main>
          <div>
            <div class="flex gap-2">
              <el-tag
                v-for="(tag, index) in dynamicTags"
                :key="index"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
                @click="handleTagClick(tag.link)"
              >
                {{ tag.text }}
              </el-tag>
              <el-input
                v-if="inputVisible"
                ref="InputRef"
                v-model="inputValue"
                class="w-20"
                size="small"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
              />
            </div>
          </div>
          <br />
          <div>
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { ElInput } from "element-plus";
import { sysStore } from "../../store/sys.js";
import { Promotion } from "@element-plus/icons-vue";
import http from "../../util/http.js";

const useSysStore = sysStore();

const inputValue = ref("");
const dynamicTags = ref([
  { text: "首页", link: "/main/home" },
  // { text: "菜单管理", link: "/main/meau" },
]);
const inputVisible = ref(false);
const InputRef = ref();

const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push({ text: inputValue.value, link: "" });
  }
  inputVisible.value = false;
  inputValue.value = "";
};

const addToDynamicTags = (tagText, link) => {
  if (!dynamicTags.value.some((tag) => tag.text === tagText)) {
    dynamicTags.value.push({ text: tagText, link });
  }
  router.replace(link);
};

const handleMenuClick = (text, url) => {
  addToDynamicTags(text, url);
};

let router = useRouter();
let account = ref();

const handleTagClick = (link) => {
  if (link) {
    router.push(link);
  }
};

const back = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("account");
  router.push("/login");
};

/*以下内容为菜单*/

const icons = {
  Promotion,
};
const resolveComponent = (iconName) => {
  return icons[iconName] || null;
};
const route = useRoute();
const activePath = ref(null);

const handleOpen2 = (key, keyPath) => {};
const handleClose2 = (key, keyPath) => {};

watch(
  route,
  (newVlu, oldVlu) => {
    activePath.value = newVlu.path;
  },
  { immediate: true, deep: true }
);

const menuList = ref([]);
const token = localStorage.getItem("token");
const initTableData = () => {
  http
    .post("/menu/getmenutable", {
      token: token,
    })
    .then((res) => {
      let result = res.data;
      menuList.value = convertToTree(result.rows);
    });
};
const convertToTree = (data) => {
  const result = [];
  const map = {};

  data.forEach((item) => {
    map[item.id] = { ...item, children: [] };
  });

  data.forEach((item) => {
    if (item.pid === "0") {
      result.push(map[item.id]);
    } else {
      if (
        map[item.pid] &&
        !map[item.pid].children.some((child) => child.id === item.id)
      ) {
        map[item.pid].children.push(map[item.id]);
      }
    }
  });

  return result;
};

onMounted(() => {
  initTableData();
  const storedaccount = localStorage.getItem("account");
  if (storedaccount) {
    account.value = storedaccount;
  }
});
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 18px;
  color: #fff;
}

.toolbar div {
  display: flex;
  align-items: center;
}

.toolbar span {
  margin-left: 10px;
}
</style>
